<template>
    <div>
        <div>
            <p
                style="font-weight: 600;color: rgb(10, 112, 184);border-bottom: 2px solid #ccc;margin: 10px 0px 10px 0px;height:40px;line-height: 30px;">
                &nbsp;&nbsp;告警配置
            </p>
            <div style="margin: 10px;">
                <el-input v-model="formline.search" placeholder="请输入工单编号" prefix-icon="el-icon-search"
                    style='width: 240px;'>
                </el-input>
                <el-button type="primary" @click="search" style="margin-left: 15px;">查询</el-button>
                <el-button type="primary" @click="chongzhi">重置</el-button>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;应用分类&nbsp;&nbsp; </span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option @click="chongzhi2" v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;应用表单&nbsp;&nbsp; </span>
                <el-select v-model="value2" placeholder="请选择">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div style="padding: 10px;">
            <div style="border: 1px solid #ccc;height: 40px;line-height: 40px;">
                <span style="margin-left: 10px;font-weight: 500;">告警配置列表</span>
                <span class="el-icon-plus" @click="addDialogVisible = true"
                    style="float: right;line-height: 40px;margin-right: 10px;color: rgb(30, 230, 30);">
                    <span> 添加方案</span>
                </span>

            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编码" width="180">
                </el-table-column>
                <el-table-column prop="fangan" label="方案名称" width="180">
                </el-table-column>
                <el-table-column prop="fenlei" label="应用分类" width="180">
                </el-table-column>
                <el-table-column prop="biaodan" label="应用表单">
                </el-table-column>
                <el-table-column prop="miaoshu" label="方案描述">
                </el-table-column>
                <el-table-column prop="miaoshu" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" size="small">&nbsp;修改</el-button>
                        <el-button type="text" size="small" style="margin-left:5px;" @click="Del(scope.row)">&nbsp;删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[1, 2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>



        <!-- 添加弹出框 -->
        <div>
            <el-dialog :visible.sync="addDialogVisible" title="添加数据" width="90%" :style="{ 'height': '90%' }">
                <el-form>
                    <el-form-item label="方案描述">
                        <el-input v-model="form.miaoshu" type="textarea" :rows="4" placeholder="请输入内容"
                            style="width: 800px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-model="form.feilei" label="应用分类">
                        <el-button @click="add">通用</el-button>
                        <el-button @click="add2">软件类</el-button>
                        <el-button @click="add3">硬件类</el-button>
                        <el-button @click="add4">文档类</el-button>
                    </el-form-item>
                    <el-form-item v-model="form.biaodan" label="应用表单">
                        <el-button @click="addZ">通用</el-button>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd">添加</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>


export default {
    data() {
        return {
            total: 0,
            value: '',
            selectedValue: '',
            options: [{
                value: '选项1',
                label: '全部'
            }, {
                value: '选项2',
                label: '服务器'
            }, {
                value: '选项3',
                label: '储存'
            }, {
                value: '选项4',
                label: '网络设备'
            }, {
                value: '选项5',
                label: '机房环境'
            }, {
                value: '选项6',
                label: '桌面PC'
            }, {
                value: '选项7',
                label: '外设'
            },],
            value2: '',
            options2: [{
                value: '选项1',
                label: '全部'
            }, {
                value: '选项2',
                label: '服务器'
            }, {
                value: '选项3',
                label: '储存'
            }, {
                value: '选项4',
                label: '网络设备'
            }, {
                value: '选项5',
                label: '机房环境'
            }, {
                value: '选项6',
                label: '桌面PC'
            }, {
                value: '选项7',
                label: '外设'
            },
            ],
            currentPage: 1, // 当前页码
            pageSize: 5, // 每页显示的数量
            tableData: [], // 所有数据
            // 弹出框表单
            tableData2: [{
                duixiang: '值',
                dongzuo: '<',
                zhi: '21',
                gaojingjibie: '严重告警',
                gaojingtishi: '温度过高'
            }, {
                duixiang: '值',
                dongzuo: '<',
                zhi: '22',
                gaojingjibie: '严重告警',
                gaojingtishi: '温度过高'
            }, {
                duixiang: '值',
                dongzuo: '<',
                zhi: '23',
                gaojingjibie: '严重告警',
                gaojingtishi: '温度过高'
            },],

            form: {
                miaoshu: '',
                fangan: '默认通电状态',
            },
            addDialogVisible: false,
            formline: {
                search: ''
            }
        }

    },
    methods: {
        add() {
            this.form.feilei = "通用"
        },
        add2() {
            this.form.feilei = "软件类"
        },
        add3() {
            this.form.feilei = "硬件类"
        },
        add4() {
            this.form.feilei = "文档类"
        },
        addZ() {
            this.form.biaodan = "通用"
        },
        //渲染
        Redom() {
            this.$axios({
                url: `/WuJiETianJia?_page=${this.currentPage}&_limit=5`,
                params: {
                    bianma_like: `${this.formline.search}`,
                    fenlei_like: `${this.value}`,
                    biaodan_like: `${this.value2}`,
                }
            }).then(({ data }) => {

                this.tableData = data

            })
            //总条数
            this.$axios({
                url: `/WuJiETianJia`,
                params: {
                    bianma_like: `${this.formline.search}`,
                    fenlei_like: `${this.value}`,
                    biaodan_like: `${this.value2}`,
                }
            }).then(({ data }) => {
                this.total = data.length
            })
        },
        //分页
        handleCurrentChange(v) {
            this.currentPage = v;
            this.$axios({
                url: `/WuJiETianJia?_page=${v}&_limit=5`,
                params: {
                    bianma_like: `${this.formline.search}`,
                    fenlei_like: `${this.value}`,
                    biaodan_like: `${this.value2}`,
                }
            }).then((data) => {
                this.tableData = data.data
            })
        },
        handleSizeChange(v) {
            console.log(v);
        },
        //添加确定
        handleAdd() {
            //console.log('添加数据', this.form);

            // TODO: 处理保存逻辑

            this.$axios.post(`/WuJiETianJia/`, {
                fenlei: this.form.feilei,
                miaoshu: this.form.miaoshu,
                fangan: this.form.fangan,
                biaodan: this.form.biaodan,
            }).then(() => {
                this.Redom()
            })
            this.addDialogVisible = false;
        },
        //删除确定
        Del(row) {
            this.$axios.delete(`/WuJiETianJia/${row.id}`).then(() => {
                this.currentPage = 1
                this.Redom()
            })
        },
        //修改
        edit(v) {
            this.$store.commit('setid', v.id)
            this.$router.push('/home/knowledge/wuJiB/wuJi2')
        },
        //查询
        search() {
            // console.log(123,this.selectedValue);
            this.Redom()
        },
        //重置
        chongzhi() {
            this.formline.search = ''
            this.Redom()
        },
        chongzhi2() {
            console.log(this.selectedValue);
        }
    },
    mounted() {
        //渲染
        this.Redom()
    }
}
</script>

<style scoped>
.el-dialog>>>.el-dialog__body {
    height: 90%;
}
</style>